<template>
  <div
    :class="{ itemmusic_fixed: store.state.showBigPlayer, itemmusic: false }"
    ref="itemmusic2"
  >
    <ItemMusicTop :playList="state.playList" />
    <div class="musicList">
      <div class="musicListHead">
        <div class="left">
          <svg aria-hidden="true" class="bofang_icon">
            <use xlink:href="#icon-gf-playCircle"></use></svg
          ><span>播放全部</span
          ><i>共{{ state.musicItemListDynamic.trackCount }}首</i>
        </div>
        <div class="right">
          +收藏({{ changeCount(state.musicItemListDynamic.subscribedCount) }})
        </div>
      </div>

      <div class="musicListContent">
        <ul class="main_list">


          <li
            v-for="(music, index) in state.itemAllSong.songs"
            :key="music.id"
            class="music_list_item"
          >
            <div class="num">{{ index + 1 }}</div>
            <div
              class="music_info"
              @click="
                playMusic({
                  songs: state.itemAllSong.songs,
                  index: index,
                })
              "
            >
              <h3>{{ music.name }}</h3>
              <h5>
                <span v-show="music.fee == '1'" class="vip">vip</span>
                <span
                  v-show="
                    state.itemAllSong.privileges[index].maxBrLevel ===
                    'lossless'
                  "
                  class="sq"
                  >SQ</span
                >
                <span
                  v-show="
                    state.itemAllSong.privileges[index].maxBrLevel === 'hires'
                  "
                  class="sq"
                  >Hi-res</span
                >
                <i v-for="ar in music.ar" :key="ar.id">{{ ar.name }}</i
                ><i class="alname">{{ " - " + music.al.name }}</i>
              </h5>
            </div>

            <div class="music_op">
              <div class="showMv">
                <svg aria-hidden="true" class="music_op_icon">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
              </div>
              <div class="showList">
                <svg aria-hidden="true" class="music_op_icon">
                  <use xlink:href="#icon-31liebiao"></use>
                </svg>
              </div>
            </div>
          </li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import ItemMusicTop from "@/components/item/ItemMusicTop.vue";
import ItemMusicList from "@/components/item/ItemMusicList.vue";
import { reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import {
  getMusicItemList,
  getMusicItemListAllSong,
} from "@/request/api/item.js";
import { useStore } from "vuex";
export default {
  components: {
    ItemMusicTop,
    ItemMusicList,
  },
  methods: {},
  setup(props) {
    const store = useStore();
    const state = reactive({
      playList: {},
      itemAllSong: {},
      musicItemListDynamic: {},
    });
    let id = useRoute().query.id;
    function changeCount(count) {
      if (count >= 100000000) {
        return (count / 100000000).toFixed(1) + "亿";
      } else if (count >= 10000) {
        return (count / 10000).toFixed(0) + "万";
      }
    }
    onMounted(async () => {
      // console.log("ItemMusic挂载了。。。");

      let res = await getMusicItemList(id);
      state.playList = res.data.playlist;

      let itemAllSong = await getMusicItemListAllSong(id);
      // console.log(typeof itemAllSong)
      let musicItemListDynamic = {
        trackCount: state.playList.trackCount,
        subscribedCount: state.playList.subscribedCount,
      };
      state.musicItemListDynamic = musicItemListDynamic;

      state.itemAllSong = itemAllSong.data;
      // console.log(state.itemAllSong);

      sessionStorage.setItem("itemDetail", JSON.stringify(state));
    });

    return {
      state,
      changeCount,
      playMusic: (paramObj) => {
        store.commit("updatePlayList", paramObj);
      },
      store,
    };
  },
};
</script>

<style lang="less" scoped>
/* 开始歌曲列表 */
.itemmusic_fixed {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;

  // height: 200px;
}

.musicList {
  margin-top: 0.2rem;
  width: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 0.5rem;
  height: 100%;
  overflow: hidden;
}

.musicList .musicListHead {
  width: 100%;
  height: 1rem;
  padding: 0 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.musicList .musicListHead .left,
.musicList .musicListHead .right {
  font-size: 0.3rem;
}

.musicList .musicListHead .left span {
  font-size: 0.3rem;
  font-weight: 700;
}

.musicList .musicListHead .left i {
  font-size: 0.2rem;
  font-style: normal;
  color: gray;
  font-weight: 500;
}

.musicList .musicListHead .right {
  background-color: #e71313;
  padding: 0.1rem 0.2rem;
  border-radius: 0.5rem;
  color: #fff;
}

.musicList .musicListHead .left .bofang_icon {
  width: 0.4rem;
  height: 0.4rem;
  fill: #e71313;
  vertical-align: center;
  transform: translateY(20%);
  margin-right: 0.1rem;
}

.musicListContent {
  width: 100%;
}

.musicListContent .main_list {
  width: 100%;
  margin-bottom: 1rem;
}

.music_list_item {
  padding: 0.4rem 0.2rem;
  height: 1.1rem;
  display: flex;
  justify-content: center;
}

.music_list_item .num {
  font-size: 0.3rem;
  color: gray;
  flex: 0.5;
  display: flex;
  align-items: center;
  padding: 0 0.1rem;
}

.music_list_item .music_info {
  font-size: 0.5rem;
  color: gray;
  flex: 7.5;
  flex-direction: column;
  justify-content: space-around;
  transform: translateY(-100%);
  .vip,
  .sq {
    display: inline-block;
    color: #ed3131;
    font-size: 0.2rem;
    border: 0.01rem solid;
    padding: 0 0.05rem;
    margin: 0;
    line-height: 0.22rem;
    height: 0.22rem;
    box-sizing: border-box;
    font-weight: 400;
    border-radius: 0.05rem;
    border-color: #f12929;
    margin: 0.05rem;
  }
}

.music_list_item .music_info h3 {
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.3rem;
  color: rgb(47, 47, 47);
  font-weight: 500;
  width: 100%;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 1;
}

.music_list_item .music_info h5 {
  height: 0.3rem;
  //   line-height: 0.5rem;
  font-size: 0.2rem;
  color: rgb(137, 137, 137);
  font-weight: 500;

  width: 100%;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 1;
  //   padding-right: .2rem;

  i {
    font-style: normal;
  }
}

.music_list_item .music_op {
  flex: 2;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  transform: translateY(-15%);
}

.music_op_icon {
  width: 0.3rem;
  height: 0.3rem;
  fill: gray;
}
</style>